//定义通过ID获取页面元素的方法
var $ = function(a) {
    return document.getElementById(a);
};

//定义通过Class获取页面元素的方法
var $list = function(z) {
    return document.getElementsByClassName(z);
};

//构建一个对象
var $C = function(tag) {
    return document.createElement(tag);
};


/*
    组件

    定义方法
    var win = function(width, height, titlt, content) {
        ...
    };




    //作业要求:做一个窗口的组件
    ps: 1.模式窗口
        2.要求指定窗口的大小，标题
        3.要求能指定窗口的内容 格式如下:页面名称 xx.html
        4.能适应窗口的大小变化

        var win = function() {
            ...
        };



        win(500, 300, '我的窗口', 'cal.html');







    调用方法    属性 大小, 标题, 内容...
    win(300, 100, '新增好友', '...');


    ------------------------------------------------------
    窗口事件
    window.onload 加载
    window.onclick 点击
    window.onresize 缩放事件




    
*/

var globe_width = 0;
var globe_height = 0;

//窗口缩放
window.onresize = function() {
    //处理背景层
    $('win_back').style.width = document.documentElement.clientWidth + 'px';
    $('win_back').style.height = document.documentElement.clientHeight + 'px';

    //处理窗口居中的问题
    var win_inner = $('win_inner');
    win_inner.style.left = (document.documentElement.clientWidth - globe_width) / 2 + 'px';
    win_inner.style.top = (document.documentElement.clientHeight - globe_height) / 2 + 'px';
};


//定义打开窗口的方法
var win = function(winWidth, winHeight, title, cnt) {
    globe_width = winWidth;
    globe_height = winHeight;

    //用于关闭窗口
    var close = function() {
        document.body.removeChild(_back);
        document.body.removeChild(_inner);
    };

    if (true) {
        //构造一个div(背景层)
        var _back = $C('div');
        _back.id = 'win_back';
        _back.style.position = 'absolute';
        _back.style.left = 0;
        _back.style.top = 0;
        _back.style.opacity = 0.8;
        _back.style.backgroundColor = '#d4e9ff';
        _back.style.width = document.documentElement.clientWidth + 'px';
        _back.style.height = document.documentElement.clientHeight + 'px';
        document.body.appendChild(_back);
    }//窗口背景

    if (true) {
        //构造窗口内容
        var _inner = $C('div');
        _inner.id = 'win_inner';
        _inner.style.position = 'absolute';
        _inner.setAttribute('win_width', winWidth);
        _inner.setAttribute('win_height', winHeight);
        /*_inner.win_width = winWidth;
        _inner.win_height = winHeight;*/
        _inner.style.left = (document.documentElement.clientWidth - winWidth) / 2 + 'px';
        _inner.style.top = (document.documentElement.clientHeight - winHeight) / 2 + 'px';
        _inner.style.width = winWidth + 'px';
        _inner.style.height = winHeight + 'px';
        _inner.style.border = '1px solid #3560ff';
        _inner.style.backgroundColor = 'white';
        document.body.appendChild(_inner);
        //窗口标题栏
        var _bar = $C('div');
        _bar.style.opacity = 0.8;
        _bar.style.backgroundColor = '#d4e9ff';
        _bar.style.width = winWidth + 'px';
        _bar.style.hegiht = '100px';
        _bar.style.border = '1px solid #3786a9';
        _inner.appendChild(_bar);
    }//窗口的标题

    if (true) {
        //标题和关闭按钮
        var _title = $C('div');
        _title.style.borderBottom = '1px solid #3560ff';
        _title.textContent = title;
        var _del = $C('span');
        _del.style.float = 'right';
        _del.style.cursor = 'pointer';
        _del.title = '关闭';
        _del.textContent = 'X';
        _del.onclick = function() {
            close();
        };
        _title.appendChild(_del);
        _bar.appendChild(_title);
    }//窗口的标题的关闭

    //窗口的内容
    cnt.style.display = 'block';
    _inner.appendChild(cnt);
    //...

    if (true) {
        var _sub = $C('div');
        _sub.style.textAlign = 'center';
        _sub.style.marginTop = '10px';
        _inner.appendChild(_sub);

        var _btn1 = $C('button');
        _btn1.style.width = '80px';
        _btn1.style.height = '28px';
        _btn1.innerText = '保存';
        _btn1.onclick = function() {
            var dd = add($('f_name').value);
            $('liv').appendChild(dd);
            close();
        };
        _sub.appendChild(_btn1);

        var _btn2 = $C('button');
        _btn2.style.width = '80px';
        _btn2.style.height = '28px';
        _btn2.innerText = '关闭';
        _btn2.onclick = function() {
            close();
        };
        _sub.appendChild(_btn2);
    }//窗口的按钮

};